<!-- 商品列表 -->
<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="card">
      <el-row :gutter="20">
          <el-col :span="8" class="search">
            <el-input placeholder="请输入搜索内容" v-model="queryInfo.query" clearable @clear='getGoodsList'>
              <el-button slot="append" icon="el-icon-search" @click="getQueryAboutList"></el-button>
            </el-input>
          </el-col>
          <el-col :span="6"><el-button type="primary" @click="clickAddGood()">添加商品</el-button></el-col>
          </el-row>
        <el-table
            :data="goodsList.goods"
            style="width: 100%"
            border
            stripe
            >
            <el-table-column
            label="#"
            type="index"> </el-table-column>
            <el-table-column
            label="商品名称"
            prop="goods_name"
            width="300px"> </el-table-column>
            <el-table-column
            label="样品"
            prop="goods_small_logo">
              <template v-slot="scoped">
               <el-image
                style="width: 100px; height: 100px"
                :src="scoped.row.goods_small_logo"
                fit="contain"></el-image>
              </template>
            </el-table-column>
            <el-table-column
            label="商品价格"
            prop="goods_price">
              <template v-slot="scoped">
                {{scoped.row.goods_price.toFixed(2)}}
              </template>
            </el-table-column>
            <el-table-column
            label="商品数量"
            prop="goods_number"></el-table-column>
            <el-table-column
            label="重量"
            prop="goods_weight"></el-table-column>
            <el-table-column
            label="热卖数量"
            prop="hot_mumber"></el-table-column>
             <el-table-column
            prop="goods_state"
            label="审核状态"
            width="80px"
            >
            <!-- 商品状态 0: 未通过 1: 审核中 2: 已审核 success/info/warning/danger-->
            <template v-slot="scoped">
             <el-tag v-if="scoped.row.goods_state === 0" type="danger" size="small">未通过</el-tag>
             <el-tag v-else-if="scoped.row.goods_state === 1" type="warning" size="small">审核中</el-tag>
             <el-tag v-else-if="scoped.row.goods_state === 2" type="success" size="small">已审核</el-tag>
            </template>
             </el-table-column>
            <el-table-column
            prop="is_del"
            label="商品状态"
            width="80px"
            >
            <!-- 商品0:正常  1:删除 success/info/warning/danger-->
            <template v-slot="scoped">
             <el-tag v-if="scoped.row.goods_state === 0" type="success" size="small">正常</el-tag>
             <el-tag v-else-if="scoped.row.goods_state === 1" type="info" size="small">被删除</el-tag>
            </template>
             </el-table-column>
            <el-table-column
            prop="is_promote"
            label="是否促销"
            width="80px"
            >
            <!-- 是否促销 success/info/warning/danger-->
            <template v-slot="scoped">
             <el-tag v-if="scoped.row.goods_state === 0" type="info" size="small">否</el-tag>
             <el-tag v-else-if="scoped.row.goods_state === 1" type="danger" size="small">是</el-tag>
            </template>
             </el-table-column>
            <el-table-column
            label="操作"
            align="center">
              <template  slot-scope="scope">
                <el-tooltip class="item" effect="dark" content="编辑" placement="top" :enterable='false'>
                  <el-button type="primary" icon="el-icon-edit" size="small" @click="btnEditGoods(scope.row)"></el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="删除" placement="top" :enterable='false'>
                  <el-button type="danger" icon="el-icon-delete" size="small" @click="btnDeleteGoods(scope.row)"></el-button>
                </el-tooltip>
              </template>
            </el-table-column>
        </el-table>
            <div class="div-el-pagination">
              <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              @prev-click="handlePrevChange"
              @next-click="handleNextChange"
              :current-page="queryInfo.pagenum"
              :page-sizes="[10,12,16,20]"
              :page-size="queryInfo.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="goodsList.total">
              </el-pagination>
            </div>
    </el-card>
  </div>
</template>

<script>
export default {
  created () {
    this.getGoodsList()
  },
  activated() {
    console.log('activated')
  },
  mounted() {
    // console.log('mounted')
    // 上个页面执行this.$router.go会执行此页面的mounted方法所以这样传参是有效的
    this.$root.$on('notifyGoods', (val) => {
      console.log(val)
    })
  },
  data () {
    return {
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 10
      },
      dialogAddVisible: false,
      goodsList: {}
    }
  },
  methods: {
    async getGoodsList () {
      const gParams = {
        url: '/goods',
        params: this.queryInfo
      }
      const res = await this.$send(gParams)
      if (res.meta.status === 200) {
        this.goodsList = res.data
        this.total = res.total
      }
    },
    getQueryAboutList() {
      this.getGoodsList()
    },
    handleCurrentChange(curPage) {
      this.queryInfo.pagenum = curPage
      this.getGoodsList()
    },
    handleSizeChange(pagesize) {
      this.queryInfo.pagesize = pagesize
      this.getGoodsList()
    },
    handlePrevChange(curPage) {
      this.queryInfo.pagenum = curPage
      this.getGoodsList()
    },
    handleNextChange(curPage) {
      this.queryInfo.pagenum = curPage
      this.getGoodsList()
    },
    btnEditGoods(good) {
      console.log(good)
      this.$router.push({
        name: 'good',
        params: {
          good,
          flag: true
        }
      })
      window.sessionStorage.setItem('goods', JSON.stringify(good))
    },
    btnDeleteGoods() {},
    clickAddGood() {
      window.sessionStorage.removeItem('goods')
      this.$router.push({
        name: 'good',
        flag: false
      })
    }
  }
}

</script>
<style lang='less' scoped>
.search{
  margin-bottom: 20px;
}
.div-el-pagination{
    text-align: center;
    margin-top: 20px;
    margin-bottom: 10px;
}
</style>
